const path = require('path')
// 生成html页面
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 删除某些东西
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 处理静态资源,静态资源输出
const CopyWebpackPlugin = require('copy-webpack-plugin')
// 引入webpack
const webpack = require('webpack')
// 提取css
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 删除冗余css代码
const PurifyCssWebpack = require('purifycss-webpack')
// 用于获取指定文件夹下的文件
const glob = require('glob')
module.exports = {
    // 入口配置
    entry: {
        index: './src/js/index.js'
    },
    // 出口文件
    output: {
        // 必须是绝对路劲
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader'],
            // 除node_modules目录外，其他都babel编译
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            // 从右向左(从下向上)开始执行
            // 提取css
            use: ExtractTextPlugin.extract({
                // 只在开发环境使用
                // use style-loader in development
                fallback: 'style-loader',
                use: [{
                    loader: 'css-loader',
                    options: {
                        minimize: true //css压缩
                    }
                }, {
                    loader: 'postcss-loader'
                }],
                // 解决css打包背景图的路径问题
                publicPath: '../'
            })
        }, {
            test: /\.less$/,
            // use:['style-loader','css-loader','less-loader']
            // 如果想分离less
            use: ExtractTextPlugin.extract({
                // 只在开发环境使用
                // use style-loader in development
                fallback: 'style-loader',
                use: ['css-loader', 'postcss-loader', 'less-loader'],
                // 解决css打包背景图的路径问题
                publicPath: '../'
            })
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    // 小于10kb转成base64
                    limit: 10240,
                    // 打包后的文件夹
                    outputPath: 'img'
                }
            }, {
                loader: 'image-webpack-loader',
                options: {
                    // 设置对jpg格式的图片压缩的程度设置
                    mozjpeg: {
                        progressive: true,
                        quality: 65
                    }
                }
            }]
        }]
    },
    plugins: [
        // 生成多个页面需要调用多次new HtmlWebpackPlugin() 多页面的配置
        new HtmlWebpackPlugin({
            // 生成多个页面,filename作为标识
            filename: 'index.html',
            // 多页面引入自己的js
            // chunks:['index'],
            // 自定义模板标题
            // 模板页title定义为 <%= htmlWebpackPlugin.options.title %>
            // 必须这么写htmlWebpackPlugin
            title: 'hello world',
            // 模板
            template: './src/index.html',
            // 生成的文件消除缓存
            hash: true,
            // 压缩输出
            minify: {
                // 删除空白字符(折叠空白区域)
                // collapseWhitespace:true,
                // 删除属性的双引号
                // removeAttributeQuotes:true
            }
        }),
        new CleanWebpackPlugin(['dist']),
        // 静态资源输出
        new CopyWebpackPlugin([{
            // 初始文件夹
            from: path.resolve(__dirname, 'src/asset'),
            // 目标文件夹
            to: './public'
        }]),
        // 使用热更新
        new webpack.HotModuleReplacementPlugin(),
        // 提取css
        new ExtractTextPlugin({
            filename: 'css/[name].css',
            // 根据不同环境走不同的配置（在开发环境下不使用）
            disable: process.env.NODE_ENV === "development"
        }),
        // 删除冗余css代码
        new PurifyCssWebpack({
            // purifycss会根据配置的路劲遍历你的HTML文件，查找你使用的CSS
            paths: glob.sync(path.join(__dirname, 'src/*.html')),
            minimize: true
        }),
        // 向全局暴露第三方库
        new webpack.ProvidePlugin({
            aaa: 'jquery'
        })
    ],
    // 开发服务器
    devServer: {
        // 设置服务器访问的基本目录
        contentBase: path.resolve(__dirname, 'dist'),
        // 设置开发服务器的地址
        host: 'localhost',
        // 设置开发服务器的端口
        port: 8080,
        // 自动打开浏览器
        open: true,
        // 配置热更新
        hot: true
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                // 这会创建一个vendor代码块，这个代码块包含所有被其他入口(entrypoints)共享的代码。
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    priority: 10,
                    enforce: true,
                }
            }
        },
        // 为每一个入口默认添加一个只包含 runtime 的 chunk
        runtimeChunk: {
            name: 'runtime'
        }
    }
}